 
<template>
  <div id="container"></div>
</template>

<script>
import * as Three from 'three'
let scene = null,
  camera = null,
  renderer = null,
  mesh = ''
export default {
  data () {
    return {

    };
  },
  methods: {
    init () {
      let container = document.getElementById('container');
      //PerspectiveCamera（视野角度，长宽比（即宽/高），近截面，远截面）透视摄像机
      //不能使用const关键字声明变量，
      camera = new Three.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10);
      camera.position.z = 1
      //Three.BoxGeometry创建立方体的构造函数
      scene = new Three.Scene() //创建场景

      let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
      //MeshNormalMaterial根据法线方向显示不同颜色（材质）
      let material = new Three.MeshNormalMaterial();
      //创建一个网格对象，包含几何体和作用在几何体上的材质
      mesh = new Three.Mesh(geometry, material);
      scene.add(mesh);//添加到场景

      renderer = new Three.WebGLRenderer({ antialias: true });
      renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(renderer.domElement);
      //将 renderer（渲染器）的dom元素（renderer.domElement）添加到我们的 HTML 文档中
    },
    animate () {
      //渲染场景，使几何体旋转起来。
      requestAnimationFrame(this.animate);
      //console.log(this.animate, '132')
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
      renderer.render(scene, camera);
    }
  },
  mounted () {
    this.init()
    this.animate()
  }

}

</script>
<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style> 
